import React, { Component } from 'react'
import Child from './Child'

export default class App extends Component {
  myUsername = React.createRef()
  render() {
    return (
      <div>
        App
        <div>
          <h1>登录页</h1>
          {/* <input
            type='text'
            ref={this.myUsername}
          /> */}

          {/* 直接写value，会导致无法输入 */}
          {/* <input
            type='text'
            ref={this.myUsername}
            value='123'
          /> */}

          {/* 默认值设置使用 defaultValue，而不是直接使用value */}
          <input
            type='text'
            ref={this.myUsername}
            defaultValue='123'
          />

          <button onClick={() => console.log(this.myUsername.current.value)}>
            登录
          </button>
          <button onClick={() => (this.myUsername.current.value = '')}>
            重置
          </button>
        </div>
        <div>
          <h1>child</h1>
          <Child myText='首页' />
          {/* <Child myText={this.myUsername.current.value} /> */}
        </div>
      </div>
    )
  }
}

/**
 * 非受控组件
 *
 */
